<template>
<div>
    <!-- 三级分类 -->
    <category @getId="getId" :disabled="!isShow"></category>

   
    <el-card class="mt-10" >
         <!-- 表格区 -->
        <div v-if="!isShow">
            <!-- 添加 -->
            <el-button type="primary" icon="el-icon-plus" @click="addAttr" :disabled="!c3Id">添加属性</el-button>
            <!-- 表格 -->
            <el-table border :data="tableDataList">
                <el-table-column type="index" label="序号" width="80px" align="center"></el-table-column>
                <el-table-column label="属性名" width="160px" prop="attrName"></el-table-column>
                <el-table-column label="属性值列表">
                    <template #default="{$index,row}">
                        <el-tag type="success" size="small" v-for="item in row.attrValueList" :key="item.id" class="mr-5">{{item.valueName}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作"  width="140px">
                    <template #default="{$index,row}">
                        <el-button type="warning" size="mini" icon="el-icon-edit-outline" @click="editAttr(row)"></el-button>
                        <el-popconfirm :title="`删除${row.attrName}?`" @confirm="deleteAttr(row)" class="ml-10">
                            <el-button slot="reference" type="danger" size="mini" icon="el-icon-delete-solid"></el-button>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!-- 新增编辑区 -->
        <div v-else class="mt-10">
            <el-form inline>
                <el-form-item label="属性名">
                    <el-input placeholder="请输入属性名" size="small" v-model="reqSaveAttrInfo.attrName"></el-input>
                </el-form-item>
            </el-form>
    
            <el-button class="mr-20" type="primary" size="small" @click="addAttrValue">添加属性值</el-button>
            <el-button size="small" @click="isShow=false">取消</el-button>
    
            <el-table :data="reqSaveAttrInfo.attrValueList" border>
                <el-table-column type="index" label="序号"></el-table-column>
                <el-table-column label="属性值名称">
                    <template #default="{row,$index}">
                        <el-input v-if="row.inputVisable" v-model="row.valueName" ref="inputRef" @blur="blurHandler(row,$index)"></el-input>
                        <div v-else @click="clickHandler(row)">{{row.valueName}}</div>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template #default="{row,$index}">
                        <el-button type="danger" size="mini" icon="el-icon-delete-solid" @click="deleteAttrValue($index)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
    
            <el-button class="mr-20" type="primary" size="small" @click="onSave">保存</el-button>
            <el-button size="small"  @click="isShow=false">取消</el-button>
        </div>

    </el-card>
</div>
</template>

<script>
import category from '@/components/category/index.vue'
import attrApi from '@/api/attr'
export default {
    name: "VAttr",
    data() {
        return {
            c1Id:undefined,  //一级分类id
            c2Id:undefined,  //二级分类id
            c3Id:undefined,   //三级分类id
            tableDataList:[],  //表格数据
            isShow:false,    //是否展示添加编辑界面 ,默认不展示

            reqSaveAttrInfo:{
                attrName:'',    //平台属性名      
                categoryId:undefined,  //三级id
                categoryLevel:3,
                attrValueList:[],  //平台属性值
            },
         
         
        }
    },
    components:{
        category
    },
    methods: {
        //删除属性
       async deleteAttr(row){
           await attrApi.deleteAttr(row.id)
           this.$message.success('删除成功')
           this.getData()
        },
        //编辑按钮
        editAttr(row){
            //编辑区展示
            this.isShow = true
            //回显数据
            this.reqSaveAttrInfo = row
          
        },
        //保存
       async onSave(){
            //组织参数
            const params = {
                ...this.reqSaveAttrInfo,
                categoryId:this.c3Id,
            }
            await attrApi.addSave(params)
            this.$message.success('保存成功')
            this.isShow = false
            this.getData()
        },
        //删除属性值
        deleteAttrValue(index){
            this.reqSaveAttrInfo.attrValueList.splice(index,1)
            this.$message.success('删除成功')
        },
        //点击div
        clickHandler(row){
            //input出来
            row.inputVisable = true
            // //自动聚焦input
            this.$nextTick(()=>{
                // console.log(this.$refs.inputRef);
                this.$refs.inputRef.focus()
            })
        },
        //当失焦时
        blurHandler(row,index){
            //失焦取消input
            row.inputVisable = false
            //数据为空时
            if(!row.valueName){
                this.$message.error('请输入内容')
                this.reqSaveAttrInfo.attrValueList.splice(index,1)
                return 
            }
            //当重复时
            const isExist = this.reqSaveAttrInfo.attrValueList.some((item,idx)=>{
                if(idx===index){
                    return false
                }
                return item.valueName === row.valueName
            })
            //如果重复
            if(isExist){
                this.$message.error('属性内容')
                this.reqSaveAttrInfo.attrValueList.splice(index,1)
                return 
            }
        },
        //添加属性值
        addAttrValue(){
            //添加需要显示input框
            this.reqSaveAttrInfo.attrValueList.push({
                valueName:'',
                inputVisable:true
            })
            // //自动聚焦input
            this.$nextTick(()=>{
                // console.log(this.$refs.inputRef);
                this.$refs.inputRef.focus()
            })
        },
        //添加属性
        addAttr(){
            this.isShow= true
            //每次点击添加将上一次的清空
            this.reqSaveAttrInfo={
                attrName:'',    //平台属性名      
                categoryId:undefined,  //三级id
                categoryLevel:3,
                attrValueList:[],  //平台属性值
            }
        },
        //初始化数据
        async getData(){
            let res = await attrApi.getPage(this.c1Id,this.c2Id,this.c3Id)
            this.tableDataList = res.data
        },
        //自定义事件,接收分类id
        getId(params){
            this.c1Id = params.category1Id
            this.c2Id = params.category2Id
            this.c3Id = params.category3Id
        }
    },
    watch:{
        c3Id:{
            handler(val){
                //如果三级分类有值,则进行初始化数据
                if(val){
                    this.getData()
                }else{
                    //清空数据
                    this.tableDataList = []
                }
            },
            immediate:true
        }
    }
}
</script>

<style lang="less" scoped>

</style>